<template>
	<view class="cardBag">
		<view class="card-list">
			<view class="card-item flex-a flex-b" v-for="item in list" :key="item.id" @click="toDetail(item)">
				<view class="flex-a">
					<view>
						<text class="head">{{item.storeName.slice(0,1)}}</text>
					</view>
					<view>
						<view class="title">{{item.storeName}}会员</view>
						<view class="txt">余额￥{{item.money}}</view>
					</view>
				</view>
				<view>
					<uni-icons type="right" size="20" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCardBag
	} from '@/api/order.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			if (this.isLogin) {
				getCardBag().then(res => {
					if (res.code == 200) {
						this.list = res.data
					}
				})
			}
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/users/user_card_detail/index?no=' + item.no+'&storeNo='+item.storeNo
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	body {
		height: 100%;
		background: $uni-bg-color-grey;
	}

	.cardBag {
		padding: 20rpx;

		.card-title {
			margin-bottom: 20rpx;
		}

		.card-list {
			.card-item {
				width: 95%;
				margin: 0 auto;
				height: 200rpx;
				border-radius: 10rpx;
				background: linear-gradient(to right, #F703F7, #03C4F7, #3403F7);
				color: #fff;
				padding: 20rpx;
				box-sizing: border-box;

				text.head {
					display: inline-block;
					width: 80rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					border-radius: 50%;
					border: 1rpx solid #fff;
					margin-right: 10rpx;
				}

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background: darkred;
					margin-right: 20rpx;
				}

				.title {
					font-size: 28rpx;
					margin-bottom: 5rpx;
				}

				.txt {
					font-size: 20rpx;
				}
			}
		}
	}
</style>